<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复制粘贴</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .button_class{
            width: 19.7vw;
            height: 25vh;
            cursor: pointer;
            border: none;
            font-size: 1.5em;
            color: #ffffff;
            opacity: 0.8;
            outline: none;
        }
        .classLH{
            width: 0.2px;
            position: absolute;
            opacity: 0;
        }
        #zhezhao{
            width: 100vw;
            height: 100vh;
            background-color:#4b4b4b;
            display: none;
        }
        #success{
            width: 30vw;
            height: 60px;
            border: 1px solid #cccccc;
            line-height: 60px;
            background-color: #20bf6b;
            border: none;
            text-align: center;
            font-size: 1.3em;
            color: #ffffff;
            position: absolute;
            z-index: 1;
            left: 35vw;
            top: 40vh;
        }
        #choose_style{
            position: absolute;
            opacity: 1;
            z-index: 1;
            width: 10vw;
            height: 100vh;
            border: 1px solid #ccc;
            display: none;
        }
        #choose_style ul{
            background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
            list-style-type: none;
        }
        #choose_style ul li{
            margin-top: 5px;
            cursor: pointer;
        }
        #choose_style ul li img{
            width: 10vw;
            height: 9vh;
        }
    </style>
</head>
<body>
    <div id="choose_style">
        <ul>
           <li data-id="1"><img src="./images/style1.jpg" alt=""></li> 
           <li data-id="2"><img src="./images/style1.jpg" alt=""></li> 
           <li data-id="3"><img src="./images/style1.jpg" alt=""></li> 
           <li data-id="4"><img src="./images/style1.jpg" alt=""></li> 
           <li data-id="5"><img src="./images/style1.jpg" alt=""></li> 
           <li data-id="6"><img src="./images/style1.jpg" alt=""></li> 
           <li data-id="7"><img src="./images/style1.jpg" alt=""></li> 
           <li data-id="8"><img src="./images/style1.jpg" alt=""></li> 
           <li data-id="9"><img src="./images/style1.jpg" alt=""></li> 
           <li data-id="10"><img src="./images/style1.jpg" alt=""></li> 
        </ul>
    </div>
</body>
<!-- <script src="./js/donghua.js"></script> -->
</html>
<script>
    //动画
    //隐藏  显示
    class Animation{
        constructor(){

        }
        //设置元素的隐藏
        hide(){
            this.style.display = 'none';    
        }

        //设置元素的显示
        show(){
            this.style.display = 'block';
        }

        //设置鼠标在元素上面
        mousemove(el){
            el.onmousemove = function(){
                this.style.opacity = 1;
            }
        }

        //设置鼠标离开元素
        mouseleave(el){
            el.onmouseleave = function(){
                this.style.opacity = 0.8;
            }
        }

        //点击事件
        click(el,color='',zhezhao='',success=''){
            el.onclick = () => {
                const zhezhaoS = document.getElementById(zhezhao);
                const successS = document.getElementById(success);
                const select_color = color.substr(1);
                const input = document.getElementById(select_color);
                input.select();
                document.execCommand('copy');
                zhezhaoS.style.display = 'block';
                zhezhaoS.style.backgroundColor = color;
                successS.style.backgroundColor = color;
                successS.style.fontSize = '3em';
                successS.innerHTML = '复制成功LH ' + color;
                setTimeout(() => {
                    zhezhaoS.style.display = 'none';
                },600);
            }
            
        }
    }

   /**
    *创建表单元素
    *ElemName 元素名字
    *type     元素类型
    *classList 元素的类
    *color   元素的颜色
   */
    class CreateFormElem extends Animation{
        constructor(ElemName,type='text',classList='',color=''){
            super();
            this.ElemName = ElemName;
            this.type = type;
            this.classList = classList;
            this.color = color;
        }

        //创建输入框
        createInput(){
            let input = document.createElement(this.ElemName);
            input.type = this.type;
            input.classList = this.classList;
            input.setAttribute('value',this.color);
            let id_color = this.color.substr(1);
            input.setAttribute('id',id_color);
            document.body.appendChild(input);
            return input;
        }

        //创建button元素
        createButton(){
            let button = document.createElement(this.ElemName);
            button.type = this.type;
            button.classList = this.classList;
            let buttonText = document.createTextNode(this.color);
            button.appendChild(buttonText);
            button.style.backgroundColor = this.color;
            document.body.appendChild(button);
            return button;
        }

        //创建遮罩对象
        createZZ(){
            let div = document.createElement(this.ElemName);
            div.setAttribute('id','zhezhao');
            //创建弹窗对象
            let div_tan = document.createElement(this.ElemName);
            div_tan.setAttribute('id','success');
            div.appendChild(div_tan);
            document.body.appendChild(div);
            return div;
        }
    }
   

    let color_arr = [
                 '#fc5c65','#fd9644','#fed330','#26de81','#2bcbba'
                 ,'#eb3b5a','#fa8231','#f7b731','#20bf6b','#0fb9b1'
                 ,'#45aaf2','#4b7bec','#a55eea','#d1d8e0','#778ca3'
                 ,'#2d98da','#8854d0','#a5b1c2','#4b6584','#FD7272'
                ];

    let ZZ = new CreateFormElem("div");
    ZZ.createZZ();


    //创建input
    for(let i = 0 ; i <= 19 ; i++){
        let inputS = new CreateFormElem('input','text','classLH',color_arr[i]);
        let Buttons = new CreateFormElem('button','button','button_class',color_arr[i]);
        inputS.createInput();
        let _button = Buttons.createButton();
        Buttons.mousemove(_button);
        Buttons.mouseleave(_button);
        Buttons.click(_button,color_arr[i],'zhezhao','success');
    }



    //创建左边的色彩导航
    let choose_style = document.getElementById("choose_style");
    let body = document.querySelector("body");
    body.onmousemove = function(){
       let res =  mousePos();
       let _left = parseInt(getComputedStyle(choose_style).left);
        if(res.x == 0){
            choose_style.style.display = 'block';
        }else if(res.x > parseInt(getComputedStyle(choose_style).width)){
            choose_style.style.display = 'none';
        }
    }
    function mousePos(e){
        e=e||window.event;
        var scrollX=document.documentElement.scrollLeft||document.body.scrollLeft;//分别兼容ie和chrome
        var scrollY=document.documentElement.scrollTop||document.body.scrollTop;
        var x=e.pageX||(e.clientX+scrollX);//兼容火狐和其他浏览器
        var y=e.pageY||(e.clientY+scrollY);
        return {x:x,y:y};
  }

  let lis = document.querySelectorAll("ul>li");
  console.log(lis)
</script>